<template>
<!-- v-if='details==="详情"' -->
    <div >
      <div style="display: flex;justify-content: space-between;">
        <p class="base-info-title">{{$t('internship.reviewDetail')}}</p>
      </div>
      <table  class="table-style-baseinfo">
        <tr>
            <td class="text-right-background-color">{{$t('internship.internshipBase')}}:</td>
            <td class="text-left-background-none">{{dataForm.baseName}}</td>
            <td class="text-right-background-color">{{$t('internship.baseLevel')}}:</td>
            <td class="text-left-background-none">{{dataForm.baseLevel | collegeAcademyList(options.degreeType)}}</td>
            <!-- <td class="text-left-background-none">{{dataForm.baseLevel}}</td> -->
        </tr>
        <tr>
            <td class="text-right-background-color">{{$t('internship.proviCity')}}:</td>
            <td class="text-left-background-none">{{dataForm.provinceCity}}</td>
            <td class="text-right-background-color">{{$t('internship.address')}}:</td>
            <td class="text-left-background-none">{{dataForm.address}}</td>
        </tr>
        <tr>
          <td class="text-right-background-color">{{$t('internship.representative')}}:</td>
          <td class="text-left-background-none"  >{{dataForm.legalPresident}}</td>
          <td class="text-right-background-color">{{$t('internship.stopState')}}:</td>
          <td class="text-left-background-none"  >
             <span v-if="dataForm.isEnabled == 0">停用</span>
             <span v-if="dataForm.isEnabled == 1">启用</span>
          </td>
        </tr>
        <tr>
            <td class="text-right-background-color">{{$t('internship.effectiveDate')}}:</td>
            <td class="text-left-background-none">{{dataForm.startTime}}</td>
            <td class="text-right-background-color">{{$t('internship.effectiveEnd')}}:</td>
            <td class="text-left-background-none">{{dataForm.endTime}}</td>
        </tr>
        <tr>
            <td class="text-right-background-color">{{$t('internship.baseContact')}}:</td>
            <td class="text-left-background-none">{{dataForm.baseContactPerson}}</td>
            <td class="text-right-background-color">{{$t('internship.baseNumber')}}:</td>
            <td class="text-left-background-none">{{dataForm.baseContactPhone}}</td>
        </tr>
        <tr>
            <td class="text-right-background-color">{{$t('internship.baseEmail')}}:</td>
            <td class="text-left-background-none">{{dataForm.baseContactEmail}}</td>
            <td class="text-right-background-color">{{$t('graduate.college')}}:</td>
            <td class="text-left-background-none">{{dataForm.collegeAcademy | collegeAcademyList(options.facultys)}}</td>
            
        </tr>
        <tr>
            <td class="text-right-background-color">{{$t('internship.adjunct')}}:</td>
            <td class="text-left-background-none" colspan="3" style="max-width: 300px; word-wrap: break-word; overflow: auto;">
              
              <a @click="fileName(dataForm.enclosureFileUrl)">{{dataForm.enclosureFileName}} </a>
            </td>
        </tr>
        <tr>
            <td class="text-right-background-color">{{$t('mainbase.account')}}:</td>
            <td class="text-left-background-none">{{dataForm.adminAccount}}</td>
            <td class="text-right-background-color">{{$t('mainbase.initial')}}:</td>
            <td class="text-left-background-none">{{dataForm.adminPassword}}</td>
            <!-- <td class="text-left-background-none" colspan="3">
              <p v-for="item in dataForm.fileList" :key="item.fileId">
                <a>{{item.fileName}}</a>
              </p>
            </td> -->
                 <!-- @click="download(item.fileId)" -->
        </tr>
        <tr>
          <!-- style="max-width: 300px; word-wrap: break-word; overflow: auto;" -->
          <td class="text-right-background-color">{{$t('internship.internshipIntroduc')}}:</td>
          <td class="text-left-background-none" colspan="3" style="max-width: 300px; word-wrap: break-word; overflow: auto;">
            <!-- <el-input type="textarea"
            :rows="5" v-model="dataForm.introduction">
            </el-input> -->
            {{dataForm.introduction}}
          </td>
          
        </tr>
        <tr>
          <td class="text-right-background-color">{{$t('internship.remark')}}:</td>
          <td class="text-left-background-none" colspan="3" style="max-width: 300px; word-wrap: break-word; overflow: auto;">
            <!-- <el-input type="textarea"
            :rows="5" v-model="dataForm.remark">
            </el-input> -->
            {{dataForm.remark}}
          </td>
        </tr>
      </table>
      
      <!-- <el-table tooltip-effect="light" show-overflow-tooltip stripe :data="tableData" ref="historyTable"> -->
      <div class="title-container">
        <!-- <div class="audit-title">{{$t('internship.approvals')}}</div> -->
        <div style="margin-top:30px;font-weight:bold" class="audit-title">{{$t('internship.approvals')}}</div>
        <div v-if="!list" style="margin-top:25px">
          <el-button
            v-if="expand"
            type="text"
            icon="el-icon-arrow-up"
            @click="() => {this.showTable = false;this.expand = !expand}">{{$t('HistoryTable.Retract')}}</el-button>
            <el-button
              v-else
              type="text"
              icon="el-icon-arrow-down"
              @click="() => {this.showTable = true;this.expand = !expand}">{{$t('HistoryTable.Open')}}</el-button>
        </div>
      </div>
      <edu-table :pagination="false" v-show="showTable"  :selection='false'  :tooltipEffect="tooltipEffect" stripe :data="tableData" ref="historyTable" size="mini">
        <!-- <el-table-column
          :label="$t('internship.numerical')"
          type="index"
          width="50">
        </el-table-column> -->
        <edu-table-column :label="$t('HistoryTable.time')">
          <template slot-scope="props"> {{props.row.time | formatDate}} </template>
        </edu-table-column>
        <edu-table-column :label="$t('internship.approver')" prop="approvorName"></edu-table-column>
        <edu-table-column :label="$t('internship.department')" prop="faculty"></edu-table-column>
        <edu-table-column :label="$t('graduate.operate')" prop="result">
          <template slot-scope="scope">
            <div class="is-enabled-container">
              <el-tag v-if="scope.row.result === 'COMMIT'" type="success" round>提交</el-tag>
              <el-tag v-if="scope.row.result === 'Process'" type="success" round>通过</el-tag>
              <el-tag v-if="scope.row.result === 'Reject'" type="danger" round>已驳回</el-tag>
              <el-tag v-if="scope.row.result === 'End'" type="info" round>已结束</el-tag>
            </div>
          </template>
        </edu-table-column>
        <edu-table-column :label="$t('internship.explain')" prop="content"></edu-table-column>
      </edu-table>
      <!-- </el-table> -->
      
      <!-- <el-table tooltip-effect="light" show-overflow-tooltip stripe :data="tableData" ref="historyTable">
        <el-table-column
          :label="$t('internship.numerical')"
          type="index"
          width="50">
        </el-table-column>
        <el-table-column :label="$t('HistoryTable.time')">
          <template slot-scope="props">{{props.row.time | formatDate}}</template>
        </el-table-column>
        <el-table-column :label="$t('internship.approver')" prop="approvorName"></el-table-column>
        <el-table-column :label="$t('internship.department')" prop="faculty"></el-table-column>
        <el-table-column :label="$t('graduate.operate')" prop="result"></el-table-column>
        <el-table-column :label="$t('internship.explain')" prop="content"></el-table-column>
      </el-table> -->
     
    </div>
    
</template>
<script>
import {downloadfile} from "common/src/api/upload";
import HistoryTable from 'common/src/views/graduateStudent/component/HistoryTable'
import graduateStudent from 'common/src/api/graduateStudent/graduateStudent';
import { queryDic } from "common/src/api/dictionary";
import UTILS from "common/src/utils/utils";
import filters from "common/src/filters";
export default {
  props: {
    
    dataListProp: {
      type: Object
    },
    databjit: {
      type: Array
    },
    showFlag: {
      type: Boolean,
      default: false
    }
  },
  components: {
    HistoryTable
  },
  data() {
    return{
      showTable: true,
      expand: true, //默认展开
      queryForm: {}, //接收路由跳转的数据
      tableList: '详情',
      dataForm: {
        opinion: '',
        fileList: [],
        achievementId: '',
        studentId: '',
        practiceId: '',
        calendarId: ''
      }, //表格数据
      curCheckStandard: '',
      curPracticeId: '',
      internship: {
        opinion: '',
        fileList: [],
        achievementId: '',
        studentId: '',
        practiceId: '',
        calendarId: ''
      },
      options: {
        facultys: [],
        degreeType: [],
        title: [],
        sex: [],
      },
      internshipRule: {
        opinion: [
            {
                required: true,
                message: this.$t('myExamine.reviewComments'),
                trigger: "blur"
            }
        ]
      },
      tableData: []
    }
  },
  filters: {
    collegeAcademyList(val, array) {
      let str = "";
      for (let item of array) {
        if (val === item.value) {
          str = item.label;
        }
      }
      return str;
    },
    formatDate(date) {
      return filters.formatDate(date, "yyyy/MM/dd hh:mm:ss");
    }
  },
  watch: {
    showFlag: {
      handler: function(newV, oldV) {
        if (newV) {
          // console.log(this.dataListProp, 'sdfg', newV);
          this.dataForm = this.dataListProp;
          this.tableData = this.databjit;
          this.showTable = true;
          this.expand = true;
          // console.log(this.databjit, 'fssf');
          
          // graduateStudent.internGetDetail(this.dataListProp.id).then(res => {
          //   console.log(res, 'ffsd');
          //   this.dataForm = res.data;
          // });
        }
      },
      deep: true
    }
    // dataListProp
  },
  mounted() {
    this.getOptions();
  },
  created() {
    this.dataForm = this.dataListProp;
    this.tableData = this.databjit;
    this.showTable = true;
    this.expand = true;
    // console.log(this.databjit, 'fssf');
    // this.dataForm = this.dataListProp;
    // graduateStudent.internGetDetail(this.dataListProp.id).then(res => {
    //   console.log(res, 'ffsd');
    //   this.dataForm = res.data;
    // });
  },
  methods: {
    fileName(enclosureFileUrl) {
      downloadfile(enclosureFileUrl);
    },
    getOptions() {
      // 筛选条件字典查询
      let data = {
        lang: this.$store.getters.language || "cn",
        type: "allChild",
        keys: ["X_YX", 'G_XBIE', "JDJB",]
      };
      queryDic(data).then(res => {
        UTILS.fillSelect(
          {
            facultys: "X_YX",
            degreeType: "JDJB",
            sex:"G_XBIE"
          },
          res.data,
          this.options
        );
        // console.log(this.options);
        
      });
    },
    // 驳回
    reject() {
      // if (this.internship.opinion.indexOf("$") < 0) {
      //   if (this.internship.opinion) {
      //       let practiceIds = [];
      //       practiceIds.push(this.queryForm.row.practiceId);
      //       let data = {
      //         practiceIdList: practiceIds,
      //         opinion: this.internship.opinion,
      //         status: 3
      //       }
      //       InnovationEntrepreneurshipPracticeApi.examine(data).then((data) => {
      //         this.$message({
      //             type: "success",
      //             message: this.$t('identificationToDoList.SuccessfulOperation')
      //         });
      //         this.goBack();
      //       })
      //   } else {
      //     this.$message({
      //         type: "error",
      //         message: this.$t('myExamine.reviewComments')
      //     });
      //   }
      // } else {
      //   this.$message({
      //       type: "error",
      //       message: this.$t('identificationToDoList.cannotContain')
      //   });
      // }
    },
    // 通过
    pass() {
      // if (this.internship.opinion.indexOf("$") < 0) {
      //       let practiceIds = [];
      //       practiceIds.push(this.queryForm.row.practiceId);
      //       let data = {
      //         practiceIdList: practiceIds,
      //         opinion: this.internship.opinion,
      //         status: 2
      //       }
      //       InnovationEntrepreneurshipPracticeApi.examine(data).then((data) => {
      //         this.$message({
      //             type: "success",
      //             message: this.$t('identificationToDoList.SuccessfulOperation')
      //         });
      //         this.goBack();
      //   })
      // } else {
      //   this.$message({
      //       type: "error",
      //       message: this.$t('identificationToDoList.cannotContain')
      //   });
      // }
    },
    goBack() {
      // this.$router.go(-1);
      this.$store.commit("delete_tabs", this.$route.path);
      this.$router.go(-1);
      // this.$router.push({
      //   path: '/settingInternship',
      //   query: this.$route.query
      // });
      // this.$emit('goBack');
      // this.$emit('cancel-dialog', false);
    },
    // 获取表格数据
    assignment() {
    //   this.queryForm = this.$route.query;
    //   this.curPracticeId = this.queryForm.row.practiceId;
    //   let data_ = {
    //       calendarId: this.queryForm.row.calendarId,
    //       type: this.queryForm.row.type,
    //       achievementId: this.queryForm.row.achievementId,
    //       practiceId: this.queryForm.row.practiceId,
    //       examineHistory: 1
    //   }
    //   InnovationEntrepreneurshipPracticeApi.identificationGetOne(data_).then((res) => {
    //       this.dataForm = res.data;
    //       this.curCheckStandard = `<div style = "width: 100%; word-wrap: break-word; overflow: auto;">${res.data.checkStandard}</div>`
    //       this.tableData = res.data.listApproveHistory;
    //   })
    },
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
// .his-container {
  .title-container {
    display: flex;
    align-items: center;
    .audit-title {
      font-size: 16px;
    }
  }
// }
.inner-breadcrumb {
    .breadcrumb {
        span {
            font-weight: normal;
            color: #aaa;
        }
        a {
            font-weight: normal;
            color: #aaa;
        }
        a:hover {
            color: #409eff;
        }
        .last {
            font-weight: bold !important;
            cursor: default !important;
        }
        .disable {
            cursor: default !important;
        }
    }
}
.condition-title-p {
    font-weight: 400;
    font-style: normal;
    color: #2b3b4e;
    font-size: 18px;
    margin-bottom: 15px;
}
.base-info-title {
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    color: #2b3b4e;
}
.table-style-baseinfo {
    background-color: rgba(210, 212, 214, 1);
    box-sizing: border-box;
    border-width: 0.5px;
    border-style: solid;
    border-color: rgba(210, 212, 214, 1);
    border-radius: 0px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    width: 100%;
    font-weight: 401;
    font-style: normal;
    font-size: 14px;
    color: #8896a7;
    margin-bottom: 20px;
}
.table-style-baseinfo td {
    width: 25%;
    background-color: rgba(255, 255, 255, 1);
    border: none;
    border-radius: 0px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-weight: 401;
    font-style: normal;
    font-size: 14px;
    color: #2b3b4e;
    height: 32px;
    padding: 0 10px;
}
.table-style-baseinfo .text-right-background-color {
    background-color: #fdfeff4d;
    text-align: right;
}
.text-left-background-none {
    text-align: left;
}
</style>